<template>
  <!-- 我的页面内置框架 导航栏组件 -->
  <nav class="iframe-nav">
    <router-link active-class="active" to="/mine/work" class="ifr-nav-item"
      >我的作品</router-link
    >
    <router-link active-class="active" to="/mine/collect" class="ifr-nav-item"
      >我的收藏</router-link
    >
    <router-link active-class="active" to="/mine/musiclist" class="ifr-nav-item"
      >我的歌单</router-link
    >
    <router-link active-class="active" to="/mine/message" class="ifr-nav-item"
      >我的消息</router-link
    >
    <router-link
      v-show="isShow"
      active-class="active"
      to="/mine/edit_user_info"
      class="ifr-nav-item"
    >
      <i @click.stop="closeTabNavHandler" class="el-icon-close close"></i
      >编辑资料</router-link
    >
  </nav>
</template>

<script>
export default {
  name: "IframeNav",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    closeTabNavHandler() {
      this.isShow = false;
      this.$router.back();
    },
  },
  mounted() {
    this.$bus.$on("changeShow", (val) => {
      this.isShow = val;
    });
  },
};
</script>

<style lang="less" scoped>
.close {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
  z-index: 5;
}
.iframe-nav {
  width: 20%;
  margin-right: 0.5rem;
  min-height: 5rem;
  overflow: auto;
  .ifr-nav-item {
    padding: 0.2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s;
    &:hover {
      color: #1297c8;
    }
    &.active {
      color: #67c23a;
    }
  }
}
</style>